<template>
  <ul class="context-menu-container">
    <li @click="onRefresh">刷新</li>
    <li @click="onCloseSelf" v-show="tagData?.index!==0">关闭</li>
    <li @click="onCloseOther">关闭其他</li>
    <li @click="onCloseAll">关闭所有</li>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const props = defineProps({
  tagData: {
    type: Object,
    default: () => { }
  }
})

const router = useRouter()
const store = useStore()

// 刷新
const onRefresh = () => {
  router.go(0)
}

// 关闭单个
const onCloseSelf = () => {
  store.commit('tagsViewModule/removeTagsView', {
    type: 'self',
    data: props.tagData
  })
}

// 关闭其他
const onCloseOther = () => {
  store.commit('tagsViewModule/removeTagsView', {
    type: 'other',
    data: props.tagData
  })
}

// 全部关闭
const onCloseAll = () => {
  store.commit('tagsViewModule/removeTagsView', {
    type: 'all',
    tag: props.tag
  })
}

</script>

<style lang='less' scoped>
.context-menu-container {
  position: fixed;
  background: #fff;
  z-index: 3000;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 5px;
    padding: 4px 11px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>